<template>
  <div class="home" v-back="color">
     <input type="text" v-focus>
     <button @click="cutColor('red')">red</button>
     <button @click="cutColor('blue')">blue</button>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  components: {

  },
  // 什么是指令，常见的指令都有哪些 v-html v-text v-bind简写： v-on v-for v-if v-else v-model
  // 自定义指令，分为两种，局部的自定义指令，全局的自定义指令
  directives:{ // 指令
    focus:{ // focus 指令名称
      inserted(el,binding,vnode){
        // console.log(el);
        // console.log(binding);
        // console.log(vnode);
        el.focus();
      }
    }
  },
  data(){
    return {
      color: ''
    }
  },
  methods: {
    cutColor(val){ // 改变颜色
       console.log(val);
       this.color = val;
    }
  },
}
</script>
